<link type="text/css" rel="stylesheet" href="/addons/hx_pictorial/template/mobile/css/wanimation.css" />
<script type="text/javascript">
  function testAnim(x) {
    $('#drag').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      $(this).removeClass();
    });
  };
        $(document).ready(function () {
            $('#animations').change(function(){
            var anim = $(this).val();
            testAnim(anim);
            });
            var _move = false; 
            var _x, _y;
            var index_x, index_y;
            $("#drag").css({ top: {if ($item['y'])}{php echo $item['y']/2}{else}0{/if}, left: {if ($item['x'])}{php echo $item['x']/2}{else}0{/if} });
            $("#drag").bind("mousedown", downIndex); 
            $(document).bind("mousemove", mmove);
            $(document).bind("mouseup", mup);
            function mmove(e) {
                if (_move) {
                    var x = e.pageX - _x; 
                    var y = e.pageY - _y;
                    $("#drag").css({ top: y, left: x }); 
                    show(x, y);
                }
            }
            function mup() {
                _move = false;
            }
            function downIndex(e) {
                _move = true;
                _x = e.pageX - parseInt($("#drag").css("left"));
                _y = e.pageY - parseInt($("#drag").css("top"));
 
            }
            function show(x, y) {
                $("#x").val(2*x);
                $("#y").val(2*y);
            }
        });
</script>
<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal">
		<span aria-hidden="true">&times;</span>
		<span class="sr-only">Close</span>
	</button>
	<h4 class="modal-title" id="myModalLabel">设置动画元素</h4>
</div>
<div class="modal-body">
	<form action="" method="post" class="form-horizontal" role="form">
		<div style="overflow: hidden;">
			<div style="width:48%;float:left;">
				<input type="hidden" value="0" name="style">
				{if !empty($id)}
				<input type="hidden" value="{$id}" name="id">
				{/if}
				{if !empty($photoid)}
				<input type="hidden" value="{$photoid}" name="photoid">
				{/if}
				{if !empty($pictorialid)}
				<input type="hidden" value="{$pictorialid}" name="pictorialid">
				{/if}
				<div class="form-group">
					<span class="help-block">请上传图片，一般为背景透明的图片</span>
					<div class="col-sm-12">
						<div class="input-group">
							<input type="text" value="{$item['item']}" name="item" id="upload-image-url-item" class="form-control">
							<span class="input-group-btn">
								<button class="btn btn-default" type="button" onclick="showImageDialog(this, 'YTo1OntzOjU6IndpZHRoIjtpOjgwMDtzOjY6ImhlaWdodCI7aTo2MDA7czo2OiJleHRyYXMiO2I6MDtzOjY6Imdsb2JhbCI7YjowO3M6MTE6ImNsYXNzX2V4dHJhIjtzOjA6IiI7fQ==');">选择图片</button>
							</span>
						</div>
					</div>
					<div class="col-sm-12">
						<span class="help-block">请填写元素链接的网址，可以不填</span>
						<input id="url" type="text" value="{$item['url']}" name="url" class="form-control">
						<div style="padding:0 0;font-size: 10px;font-weight: bold;">
							<a href="javascript:;" class="glyphicon glyphicon-earphone" onclick="$('#modal-tel').modal();">拨号</a>
							&nbsp;
							<a href="javascript:;" class="glyphicon glyphicon-film" onclick="$('#modal-vod').modal();">视频</a>
							&nbsp;
							<a href="javascript:;" class="glyphicon glyphicon-map-marker" onclick="$('#modal-nav').modal();bmap.init({});">地图</a>
							&nbsp;
							<a href="javascript:;" class="glyphicon glyphicon-share" onclick="$('#url').val('#share');">分享</a>
						</div>
					</div>
					<div class="col-sm-12">
						<input type="hidden" value="" name="x" id="x">
						<input type="hidden" value="" name="y" id="y">
						<span class="help-block">请选择元素的动画特效</span>
						<select name="animation" id="animations" class="form-control">
							<option value="" {if ($item['animation']=='')}selected="selected"{/if}>无效果</option>
							<optgroup label="基本特效">
								<option value="flash" {if ($item['animation']=='flash')}selected="selected"{/if}>闪光</option>
								<option value="bounce" {if ($item['animation']=='bounce')}selected="selected"{/if}>弹起</option>
								<option value="shake" {if ($item['animation']=='shake')}selected="selected"{/if}>摇摆</option>
								<option value="tada" {if ($item['animation']=='tada')}selected="selected"{/if}>秋千</option>
								<option value="swing" {if ($item['animation']=='swing')}selected="selected"{/if}>悬挂</option>
								<option value="wobble" {if ($item['animation']=='wobble')}selected="selected"{/if}>摆动</option>
								<option value="pulse" {if ($item['animation']=='pulse')}selected="selected"{/if}>脉冲</option>
							</optgroup>
							<optgroup label="翻转特效">
								<option value="flipx" {if ($item['animation']=='flipx')}selected="selected"{/if}>垂直翻转</option>
								<option value="flipy" {if ($item['animation']=='flipy')}selected="selected"{/if}>水平翻转</option>
							</optgroup>
							<optgroup label="淡入特效">
								<option value="fadedown" {if ($item['animation']=='fadedown')}selected="selected"{/if}>上方淡入</option>
								<option value="fadeup" {if ($item['animation']=='fadeup')}selected="selected"{/if}>下方淡入</option>
								<option value="fadeleft" {if ($item['animation']=='fadeleft')}selected="selected"{/if}>左方淡入</option>
								<option value="faderight" {if ($item['animation']=='faderight')}selected="selected"{/if}>右方淡入</option>
								<option value="fadedownbig" {if ($item['animation']=='fadedownbig')}selected="selected"{/if}>顶部淡入</option>
								<option value="fadeupbig" {if ($item['animation']=='fadeupbig')}selected="selected"{/if}>底部淡入</option>
								<option value="fadeleftbig" {if ($item['animation']=='fadeleftbig')}selected="selected"{/if}>左侧淡入</option>
								<option value="faderightbig" {if ($item['animation']=='faderightbig')}selected="selected"{/if}>右侧淡入</option>
							</optgroup>
							<optgroup label="跳弹特效">
								<option value="bouncein" {if ($item['animation']=='bouncein')}selected="selected"{/if}>跳弹放大</option>
								<option value="bouncedown" {if ($item['animation']=='bouncedown')}selected="selected"{/if}>跳弹降落</option>
								<option value="bounceup" {if ($item['animation']=='bounceup')}selected="selected"{/if}>跳弹升起</option>
								<option value="bounceleft" {if ($item['animation']=='bounceleft')}selected="selected"{/if}>左侧跳弹</option>
								<option value="bounceright" {if ($item['animation']=='bounceright')}selected="selected"{/if}>右侧跳弹</option>
							</optgroup>
							<optgroup label="旋转特效">
								<option value="rotatein" {if ($item['animation']=='rotatein')}selected="selected"{/if}>旋转淡入</option>
								<option value="rotateindownleft" {if ($item['animation']=='rotateindownleft')}selected="selected"{/if}>左下旋转</option>
								<option value="rotateindownright" {if ($item['animation']=='rotateindownright')}selected="selected"{/if}>右下旋转</option>
								<option value="rotateinupleft" {if ($item['animation']=='rotateinupleft')}selected="selected"{/if}>左上旋转</option>
								<option value="rotateinupright" {if ($item['animation']=='rotateinupright')}selected="selected"{/if}>左下旋转</option>
							</optgroup>
							<optgroup label="其他特效">
								<option value="rollin" {if ($item['animation']=='rollin')}selected="selected"{/if}>翻滚进入</option>
								<option value="zoomindown" {if ($item['animation']=='zoomindown')}selected="selected"{/if}>顶部砸入</option>
								<option value="lightspeedin" {if ($item['animation']=='lightspeedin')}selected="selected"{/if}>摇摆进入</option>
							</optgroup>
						</select>
					</div>
				</div>
			</div>
			<div style="width:50%;height:504px;background:url({$_W['attachurl']}{$photo['attachment']}) no-repeat;background-size:100% 504px;float:right;">
				{if $item['item']}
				{php $size = GetImageSize($_W['attachurl'].$item['item']);}
				<img  id="drag" style="width:{php echo $size[0]/2}px;height:{php echo $size[1]/2}px;cursor: move;position: relative;left:0;top: 0;" src="{$_W['attachurl']}{$item['item']}" onerror="this.src='./resource/images/nopic.jpg'; this.title='图片未找到.'" class="img-responsive"/>
				{else}
				<img id="drag" style="cursor: move;position: relative;left:0;top: 0;" src="/addons/hx_pictorial/template/mobile/img/module-nopic-small.jpg" onerror="this.src='./resource/images/nopic.jpg'; this.title='图片未找到.'" class="img-responsive"/>
				{/if}
			</div>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			<button type="submit" class="btn btn-primary" name="submit" value="submit">提交</button>
			<input type="hidden" name="token" value="{$_W['token']}" />
		</div>
	</form>
</div>
<script type="text/javascript">
function showImageDialog(elm, opts) {
	require(["util"], function(util){
	var btn = $(elm);
	var ipt = btn.parent().prev();
	var val = ipt.val();
	var img = ipt.parent().parent().next().children();
	util.image(val, function(url){
		img.get(0).src = url.url;
		ipt.val(url.filename);
		ipt.attr("filename",url.filename);
		ipt.attr("url",url.url);
		$("#drag").attr("src",url.url);
	}, opts);
});
}
</script>